<template>
  <div style="height: 100%">
    <el-container style="height: 100%">
      <el-aside width="200px" style="height: 100%; background: white">
        <el-menu :router="true" :default-active="activeMenu" style="height: 100%">
          <el-sub-menu v-for="(item, index) in menuList" :key="index" :index="item.path">
            <template #title>
              <span>{{ item.label }}</span>
            </template>
            <el-menu-item
              v-for="(menu, index2) in item.children"
              :key="index + '-' + index2"
              :index="menu.path"
            >
              {{ menu.label }}
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-main>
        <router-view />
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'

interface Menu {
  label: string
  path: string | null
  children?: Menu[]
}

const route = useRoute()
const activeMenu = computed(() => {
  return route.path
})

const menuList = ref<Menu[]>([
  {
    label: 'ElementPlus',
    path: 'ElementPlus',
    children: [
      { label: '级联选择器', path: '/customCascader' },
      { label: '文件上传', path: '/upload' }
    ]
  },
  {
    label: 'AntV/X6',
    path: 'AntV/X6',
    children: [{ label: 'x6画布', path: '/about' }]
  },
  {
    label: '其他',
    path: 'other',
    children: [
      { label: 'xterm', path: '/other/xterm' },
      { label: 'callback', path: '/other/callback' }
    ]
  }
])
</script>
